<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            /*
            拖拽box1元素
                - 拖拽流程
                    1.当鼠标在被拖拽元素上按下时，开始拖拽
                    2.当鼠标移动时，被拖拽元素跟随鼠标移动
                    3.当鼠标松开时，被拖拽元素固定在当前位置
            */
           var box1 = document.getElementById("box1");
            box1.onmousedown = function(){
                document.onmousemove = function(event){
                    event = event || widnow.event;
                    // 当鼠标移动时被拖拽元素跟随鼠标移动
                    // 获取鼠标的坐标
                    var left = event.clientX;
                    var top = event.clientY;

                    // 修改box的位置
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                };

                // 当鼠标松开时，被松开元素固定在当前位置
                document.onmouseup = function(){
                  document.onmousemove = null; 
                  
                  // 取消document的onmouseup时间
                  document.onmouseup = null;
                // alert("1");
                }
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>